<script setup lang="ts">
	import { reactive, ref } from 'vue';


	const curFilter = ref(-1) // -1是全部，-2是自定义筛选

	const tab = reactive({
		tabs: ['全部', '自定义'],
		switch: ({ currentIndex } : { currentIndex : number }) => {
			if (curFilter.value !== currentIndex) curFilter.value = currentIndex
		}
	})
</script>

<template>
	<view class="log-filter">
		<uni-segmented-control :current="curFilter" :values="tab.tabs" active-color="#D56556" @clickItem="tab.switch" />
		<view v-if="curFilter === -2" class="diy-filter">
			1232
		</view>
		<!-- {{ diyFilter }} -->
		<!-- <div v-if="curFilter === -2" class="diy-filter" v-m>
			<ElRow>
				记录类型：
				<ElRadioGroup size="small" v-model="diyFilter.type">
					<ElRadioButton label="全部" value="" />
					<ElRadioButton label="隐私" value="log" />
					<ElRadioButton label="公开" value="public" />
				</ElRadioGroup>
			</ElRow>
			<ElRow>
				时间限制：
				<ElDatePicker v-model="diyFilter.timeLimit[0]" type="date" placeholder="起始日期" size="small" :editable="false"
					style="width: 120px" />
				&nbsp;~&nbsp;
				<ElDatePicker v-model="diyFilter.timeLimit[1]" type="date" placeholder="结束日期" size="small" :editable="false"
					style="width: 120px" />
			</ElRow>

			<ElRow>
				<EditTags v-model="diyFilter.content.include" label="内容含有：">
					<ElSwitch v-model="diyFilter.content.isOr" size="small" inline-prompt active-text="或" inactive-text="和" />
				</EditTags>
			</ElRow>
			<ElRow>
				<EditTags v-model="diyFilter.people.include" label="人员含有：">
					<ElSwitch v-model="diyFilter.people.isOr" size="small" inline-prompt active-text="或" inactive-text="和" />
				</EditTags>
			</ElRow>
			<ElRow>
				<EditTags v-model="diyFilter.tags.include" label="标签含有：">
					<ElSwitch v-model="diyFilter.tags.isOr" size="small" inline-prompt active-text="或" inactive-text="和" />
				</EditTags>
			</ElRow>
			<ElRow>
				<ElSwitch v-model="diyFilter.isOrAll" size="small" active-text="内容、人员、标签做或运算" />
			</ElRow>
			<ElRow v-if="diyFilter.exclude.length">
				排除 ID ：
				<ElTag v-for="tag in diyFilter.exclude" :key="tag" closable
					@close="diyFilter.exclude.splice(diyFilter.exclude.indexOf(tag), 1)"
					style="margin-right: 5px; margin-bottom: 5px">
					{{ tag }}
				</ElTag>
			</ElRow>
			<div class="add-filter">
				<ElInput v-if="curFilter === -2" v-model="diyFilter.name" style="max-width: 160px" placeholder="预设名称">
					<template #append>
						<ElButton @click="addFilter">添加</ElButton>
					</template>
				</ElInput>
			</div>
		</div> -->
	</view>
</template>

<style scoped lang="scss">
	.log-filter {
		width: 100%;
		padding: 0 $gap;
		display: flex;
		flex-direction: column;
		gap: $gap;

		// 自定义筛选框
		.diy-filter {
			border: 1px solid red;
			padding: var(--padding);
			border-radius: var(--border-radius);
			display: flex;
			flex-direction: column;
			gap: 8px;
			position: relative;

			// 添加输入框
			.add-filter {
				position: absolute;
				// top: -32px;
				bottom: var(--padding);
				right: var(--padding);
			}
		}
	}
</style>